<!DOCTYPE html>
<html lang="en">
  <head>
    {{include/head.html}}
  </head>

  <body>
    {{include/header.html}}

    <div class="container-fluid">
      <div class="row flex-xl-nowrap">
        {{include/sidebar.html}}
        <main
          class="col-12 col-md-6 col-xl-8 py-md-3 pl-md-5 bd-content"
          role="main"
        >
          <div class="introduction markdown-preview">{{$MARKDOWN_HTML}}</div>
        </main>

        <!-- Page ToC -->
        <div class="col-12 col-md-3 col-xl-2 py-md-3 bd-sidebar page-toc mb-3">
          {{$PAGE_TOC_HTML}}
        </div>
        <div class="btn btn-rv-blue page-toc-toggle-btn"></div>
        <!-- End Page ToC -->
      </div>
    </div>
    {{include/footer.html}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Typist/1.2/typist.min.js"></script>
    <script src="{{$ROOT}}/assets/js/index.js"></script>
    <script>
      $(function () {
        // Render youtube video
        const anchorElements = document.querySelectorAll(".markdown-preview a");
        for (let i = anchorElements.length - 1; i >= 0; i--) {
          if (anchorElements.length - 1 - i > 3) {
            break;
          }
          const anchorElement = anchorElements[i];
          const href = anchorElement.getAttribute("href");
          if (href.match(/^https?:\/\/youtu.be\//)) {
            const match = href.match(/^https?:\/\/youtu.be\/(.+?)$/);
            if (match && match[1]) {
              const youtubeId = match[1];
              const $iframe = $(`
<div style="text-align:center;">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/${youtubeId}"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    style="max-width: 100%;"
  ></iframe>
  <p>The video is out of date</p>
</div>
`);
              $(anchorElement).replaceWith($iframe[0]);
            }
          }
        }
      });
    </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-9LBGDMRG32"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-9LBGDMRG32");
    </script>
  </body>
</html>
